<div class="text-lg">
  {{ 'PAC.MENU.EDIT_BUSINESS_AREA' | translate: {Default: "Edit Business Area"} }}
  <span class="text-base font-bold">
    {{ name() }}
  </span>
</div>

<mat-card>
  <mat-card-header>
    <div class="flex items-center gap-2">
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">settings</mat-icon>
      <span>{{ 'PAC.BUSINESS_AREA.BASIC' | translate: {Default: "Basic Info"} }}</span>
    </div>
  </mat-card-header>

  <mat-card-content>
    <pac-area-info-form />
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <div class="flex items-center gap-2">
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">group_add</mat-icon>
      <span>{{ 'PAC.MENU.USERS' | translate: {Default: "Users"} }}</span>
    </div>
  </mat-card-header>

  <mat-card-content>
    <pac-area-users></pac-area-users>
  </mat-card-content>
</mat-card>
